<template>
  <view class="company-page">
    <!-- 顶部公司信息 -->
    <view class="company-header">
      <view class="company-info-card">
        <view class="company-details">
          <text class="company-name">绍兴飞来科技有限公司</text>
          <view class="company-rating">
            <view class="stars">
              <text class="iconfont-v2 icon-shoucang star"></text>
              <text class="iconfont-v2 icon-shoucang star"></text>
              <text class="iconfont-v2 icon-shoucang star"></text>
              <text class="iconfont-v2 icon-shoucang star"></text>
              <text class="iconfont-v2 icon-shoucang star"></text>
            </view>
            <text class="positions-count">职位: 15</text>
          </view>
          <text class="company-industry">行业: 酒店</text>
        </view>
        <view class="company-image">
          <image src="http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" alt="company" />
        </view>
      </view>
    </view>

    <!-- 导航标签 -->
    <view class="nav-tabs">
      <view class="tab-item" 
           :class="{ active: currentTab === 0 }" 
           @click="switchTab(0)">
        <text>精选岗位</text>
      </view>
      <view class="tab-item" 
           :class="{ active: currentTab === 1 }" 
           @click="switchTab(1)">
        <text>企业简介</text>
      </view>
      <view class="tab-item" 
           :class="{ active: currentTab === 2 }" 
           @click="switchTab(2)">
        <text>环境展示</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 精选岗位 -->
      <view v-if="currentTab === 0" class="tab-content">
        <view class="job-list">
          <JobCard 
            v-for="(job, index) in jobList" 
            :key="index" 
            :job-data="job"
            apply-button-text="立即报名"
            @card-click="goJobDetail"
            @apply-click="applyJob"
          />
        </view>
      </view>

      <!-- 企业简介 -->
      <view v-if="currentTab === 1" class="tab-content">
        <view class="company-intro">
          <text class="intro-title">企业简介</text>
          <text class="intro-content">
            绍兴飞来科技有限公司成立于2018年，是一家专注于酒店行业数字化解决方案的高新技术企业。公司致力于为酒店提供全方位的技术支持和创新服务，帮助酒店提升运营效率，改善客户体验。
          </text>
          <view class="intro-details">
            <view class="detail-item">
              <text class="label">成立时间:</text>
              <text class="value">2018年</text>
            </view>
            <view class="detail-item">
              <text class="label">公司规模:</text>
              <text class="value">50-100人</text>
            </view>
            <view class="detail-item">
              <text class="label">公司地址:</text>
              <text class="value">浙江省绍兴市</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 环境展示 -->
      <view v-if="currentTab === 2" class="tab-content">
        <view class="environment-gallery">
          <view class="gallery-item" v-for="(item, index) in environmentList" :key="index">
            <view class="gallery-image">
              <image :src="item.image" :alt="item.title" />
            </view>
            <text class="gallery-title">{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import JobCard from "@/components/JobCard.vue";

export default {
  components: {
    JobCard,
  },
  data() {
    return {
      currentTab: 2, // 默认显示环境展示
      
      // 职位列表数据
      jobList: [
        {
          id: 1,
          title: "现金日结天天可做",
          salary: "5000-12000/天",
          tags: ["1-3年", "学历不限", "设计软件", "设计师"],
          company: {
            name: "绍兴飞来科技有限公司",
            location: "就近分配",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          },
        },
        {
          id: 2,
          title: "兼职客服在线解答",
          salary: "3000-6000/月",
          tags: ["经验不限", "大专", "客服", "在线"],
          company: {
            name: "绍兴飞来科技有限公司",
            location: "远程办公",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          },
        },
        {
          id: 3,
          title: "周末兼职配送员",
          salary: "200-300/天",
          tags: ["经验不限", "学历不限", "配送", "周末"],
          company: {
            name: "绍兴飞来科技有限公司",
            location: "就近分配",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          },
        },
      ],
      
      // 环境展示数据
      environmentList: [
        {
          title: "环境一",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          title: "环境一",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          title: "环境一",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    goJobDetail(job) {
      uni.navigateTo({
        url: `/pages/fast/job-detail?id=${job.id}`,
      });
    },
    applyJob(job) {
      uni.showModal({
        title: "确认申请",
        content: `确定要申请"${job.title}"这个职位吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "申请成功",
              icon: "success",
            });
          }
        },
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.company-page {
  min-height: 100vh;
  background: #fff;
}

.company-header {
  padding: 40rpx;
  background: linear-gradient(135deg, #ED6567 0%, #ff6b6b 100%);
  color: white;
  border-radius: 0 0 20% 20%;

  .company-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    backdrop-filter: blur(10rpx);
    position: relative;
    top: 90rpx;
    box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);

    .company-details {
      flex: 1;
      color: #999;

      .company-name {
        font-size: 36rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
        display: block;
        color: #333;
      }

      .company-rating {
        display: flex;
        align-items: center;
        gap: 20rpx;
        margin-bottom: 16rpx;

        .stars {
          display: flex;
          gap: 4rpx;

          .star {
            font-size: 24rpx;
            color: #FF7A00;
          }
        }

        .positions-count {
          font-size: 28rpx;
          opacity: 0.9;
        }
      }

      .company-industry {
        font-size: 28rpx;
        opacity: 0.9;
      }
    }

    .company-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 40rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.nav-tabs {
  display: flex;
  background: white;
  border-bottom: 2rpx solid #f0f0f0;
  margin-top: 80rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 30rpx 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &.active {
      color: #ED6567;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #ED6567;
        border-radius: 2rpx;
      }
    }

    text {
      font-size: 32rpx;
    }
  }
}

.content-area {
  flex: 1;
  padding: 40rpx;

  .tab-content {
    // JobCard 组件样式由组件内部处理

    .company-intro {
      background: white;
      border-radius: 24rpx;
      padding: 40rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

      .intro-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 24rpx;
        display: block;
      }

      .intro-content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 32rpx;
        display: block;
      }

      .intro-details {
        .detail-item {
          display: flex;
          align-items: center;
          padding: 16rpx 0;
          border-bottom: 2rpx solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .label {
            font-size: 28rpx;
            color: #666;
            width: 200rpx;
          }

          .value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }
        }
      }
    }

    .environment-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;

      .gallery-item {
        background: white;
        // border-radius: 24rpx;
        overflow: hidden;
        // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

        .gallery-image {
          width: 100%;
          height: 250rpx;

          image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .gallery-title {
          padding: 20rpx;
          font-size: 28rpx;
          color: #333;
          text-align: center;
          display: block;
        }
      }
    }
  }
}
</style>